<template>
    <el-form 
    :model="form" 
    label-width="auto" 
    style="max-width: 600px"
    :rules="rules"
    ref="abc"
    >
        <el-form-item label="Activity name" prop="name">
            <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="Activity zone" >
            <el-select prop="zone" v-model="form.region" placeholder="please select your zone">
                <el-option label="Zone one" value="shanghai" />
                <el-option label="Zone two" value="beijing" />
            </el-select>
        </el-form-item>
        <el-form-item label="Activity time" required>
            <el-col :span="11">
                    <el-date-picker prop="data1" v-model="form.date1"  type="date" placeholder="Pick a date" style="width: 100%" />
            </el-col>  
            <el-col :span="2" class="text-center">
                <span class="text-gray-500">-</span>
            </el-col>
            <el-col :span="11">
                    <el-time-picker prop="data2" v-model="form.date2" placeholder="Pick a time" style="width: 100%" />
                </el-col>
        </el-form-item>
        <el-form-item label="Instant delivery">
            <el-switch v-model="form.delivery" />
        </el-form-item>
        <el-form-item label="Activity type" prop="type">
            <el-checkbox-group v-model="form.type">
                <el-checkbox value="Online activities" name="type">
                    Online activities
                </el-checkbox>
                <el-checkbox value="Promotion activities" name="type">
                    Promotion activities
                </el-checkbox>
                <el-checkbox value="Offline activities" name="type">
                    Offline activities
                </el-checkbox>
                <el-checkbox value="Simple brand exposure" name="type">
                    Simple brand exposure
                </el-checkbox>
            </el-checkbox-group>
        </el-form-item>
        <el-form-item label="Resources" prop="resource">
            <el-radio-group v-model="form.resource">
                <el-radio value="Sponsor">Sponsor</el-radio>
                <el-radio value="Venue">Venue</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="Activity form" prop="desc">
            <el-input v-model="form.desc" type="textarea" />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submit">提交</el-button>
            <el-button @click="clean">清空</el-button>
        </el-form-item>
    </el-form>
</template>

<script  setup>
import { reactive,ref } from 'vue'

const abc = ref(null)
// 表单校验
const rules = reactive({
    name: [{ required: true, message: '请输入姓名', trigger: 'blur' },],
    zone: [{ required: true, message: '请填写你的领域', trigger: 'change' }],
    data1: [{type: 'date',required: true,message: '请选择日期',trigger: 'change',},],
    data2: [{ type: 'date', required: true, message: '请选择时间', trigger: 'change', },],
    type: [{ type: 'array', required: true, message: '请至少选择一种活动类型', trigger: 'change', },],
    resource: [
        {
            required: true,
            message: '请选择活动资源',
            trigger: 'change',
        },
    ],
    desc: [
        { required: true, message: '请输入活动表格', trigger: 'blur' },
    ],
})

// do not use same name with ref
const form = reactive({
    name: '',
    region: '',
    date1: '',
    date2: '',
    delivery: false,
    type: [],
    resource: '',
    desc: '',
})

//表单提交
const submit = () => {
    abc.value.validate((valid) => {
        if (valid)
            alert('成功')
        else
            alert('失败')
    })
    console.log('submit!')
}
//表单清空
function clean() {
    abc.value.resetFields();//注意abc是谁
}
</script>
